<template>
  <div class="box">
    <!-- 头部资产类型分析结束 -->
    <!-- 头部资产类型主题开始 -->
    <div class="box_content">
      <el-table border :data="showTypeList">
        <el-table-column label="资产类型" prop="typeName"></el-table-column>
        <el-table-column label="商品总数" prop="number"></el-table-column>
        <el-table-column label="商品总额(元)" prop="totalMoney"></el-table-column>
        <el-table-column label="在用数" prop="useNumber"></el-table-column>
        <el-table-column label="借用数" prop="borrowNumber"></el-table-column>
        <el-table-column label="维修数" prop="maintainNumber"></el-table-column>
        <el-table-column label="闲置数" prop="idleNumber"></el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 柱状图.饼图开始 -->
    <div class="box_seek">
      <div class="box_seek_left">
        <span>各部门资产总额</span>
        <div id="chart-container-left"></div>
      </div>
      <div class="box_seek_right">
        <span>资产现状分析</span>
        <div id="chart-container-right">

        </div>
      </div>
    </div>
    <!-- 柱状图.饼图结束 -->
  </div>
</template>

<script>
  import {
    assetCount,
    getUseStatus,
    assetCounts,
    assetPriceSum,
    selectType,
    selectAssetList,
    getListAll,
    summaryStatuslist,
    assetTypeList
  } from "@/api/eam-wx/asset"
  import {
    listType,
    getType,
    delType,
    addType,
    updateType,
    selectTypeList
  } from "@/api/eam-wx/type";
  import {
    indexOf
  } from "zrender/lib/core/util";
  import * as echarts from 'echarts'
  export default {
    name: '',
    data() {
      return {
        key: '',
        assList: [{
            type: '1',
            number: '200',
            money: '150',
            useNumber: '140',
            borrowNumber: '1',
            maintainNumber: '2',
            scrapNUmber: '3',
            disposeNumber: '4',
            idleNumber: '5'
          },
          {
            type: '1',
            number: '200',
            money: '150',
            useNumber: '140',
            borrowNumber: '1',
            maintainNumber: '2',
            scrapNUmber: '3',
            disposeNumber: '4',
            idleNumber: '5'
          },
          {
            type: '1',
            number: '200',
            money: '150',
            useNumber: '140',
            borrowNumber: '1',
            maintainNumber: '2',
            scrapNUmber: '3',
            disposeNumber: '4',
            idleNumber: '5'
          },
          {
            type: '1',
            number: '200',
            money: '150',
            useNumber: '140',
            borrowNumber: '1',
            maintainNumber: '2',
            scrapNUmber: '3',
            disposeNumber: '4',
            idleNumber: '5'
          },
          {
            type: '1',
            number: '200',
            money: '150',
            useNumber: '140',
            borrowNumber: '1',
            maintainNumber: '2',
            scrapNUmber: '3',
            disposeNumber: '4',
            idleNumber: '5'
          }
        ],
        myChart_right: null,
        option: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'outside', // 显示在饼图外部
              fontSize: 12,
              formatter: '{b}: {d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{
                value: "222",
                name: '在用'
              },
              {
                value: "123",
                name: '借用'
              },
              {
                value: "60",
                name: '维修'
              },
              {
                value: "555",
                name: '闲置'
              }
            ]
          }]
        },
        chartOption: {
          xAxis: {
            type: 'category',
            //柱状图名称
            data: ['烟酒类', '办公用品类', '电子产品类']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            //柱状图数量
            data: [0,23000,46000],
            type: 'bar',
            barWidth: '20%'
          }]
        },
        myChart_left: null,
        useStatus: {
          zyStatus: '',
          xzStatus: '',
          wjStatus: '',
          assetCount: '',
          assetPriceSum: '',
          wxStatus: ''
        },
        typeList: [],
        assetList: [],
        showTypeList: [],
        summaryStatuslist: [],
        test:"1230",
        test1:"90",
      }
    },
    components: {

    },
    props: [],
    created(){

    },
    mounted() {

      this.init();
      this.initChart();
      this.getTypeList();
      this.getAssetAll();
      window.addEventListener('resize', this.resizeChart);
      this.test="999";
      this.test1= "1200"
      console.log("res:"+this.option.series[0].data[0].value);
       this.option.series[0].data.splice(0,1);
       let obj = {};
       obj.value="123";

       obj.name = "可用";

       this.option.series[0].data.splice(0,0,obj);
             console.log(JSON.stringify(this.option.series[0].data));
      // assetTypeList().then(res=>{
      //   setTimeout(()=>{
      //     this.option.series[0].data[0].value = res.statusCount1;
      //     this.option.series[0].data[1].value = res.statusCount2;
      //     this.option.series[0].data[2].value = res.statusCount3;
      //     this.option.series[0].data[3].value = res.statusCount4;
      //     alert(JSON.stringify(this.option.series[0].data))
      //   },1000)
      // })
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.resizeChart);
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    methods: {

      init() {
        if (typeof echarts === 'undefined') {
          console.error('ECharts library not found. Make sure it is imported properly.');
          return;
        }

        this.myChart_right = echarts.init(document.getElementById('chart-container-right'), null, {
          renderer: 'canvas',
          useDirtyRect: false
        });

        if (this.option && typeof this.option === 'object') {
          this.myChart_right.setOption(this.option);
        }

        window.addEventListener('resize', () => this.myChart_right.resize());

      },
      initChart() {
        var dom = document.getElementById('chart-container-left');
        this.myChart_left = echarts.init(dom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        if (this.chartOption && typeof this.chartOption === 'object') {
          this.myChart_left.setOption(this.chartOption);
        }
      },
      resizeChart() {
        if (this.myChart_left) {
          this.myChart_left.resize();
        }
      },
      getTypeList() {
        selectTypeList().then(res => {
          console.log(JSON.stringify(res.rows))
          res.rows.forEach((item) => {
            let obj = {};
            obj.typeName = item.typeName;
            obj.typeId = item.typeId;
            obj.number = 0;
            obj.totalMoney = 0;
            obj.useNumber = 0;
            obj.idleNumber = 0;
            obj.borrowNumber = 0;
            obj.maintainNumber = 0;
            this.showTypeList.push(obj);
          })
        })
      },
      getAssetAll() {
        this.loading = true;
        let _this = this;
        getListAll().then(response => {
          this.showTypeList.forEach((obj) => {
            response.rows.forEach((item) => {
              if (obj.typeId == item.eamType.typeId) {
                const index = this.showTypeList.findIndex(function(object) {
                  return object.typeId === obj.typeId;
                });
                if (item.useStatus == 100) {
                  this.showTypeList[index].useNumber = this.showTypeList[index].useNumber + item.assetNum;
                }
                if (item.useStatus == 4) {
                  this.showTypeList[index].idleNumber = this.showTypeList[index].idleNumber + item.assetNum;
                }
                if (item.useStatus == 101) {
                  this.showTypeList[index].borrowNumber = this.showTypeList[index].borrowNumber + item
                    .assetNum;
                }
                if (item.useStatus == 103) {
                  this.showTypeList[index].maintainNumber = this.showTypeList[index].maintainNumber + item
                    .assetNum;
                }
                this.showTypeList[index].typeName = obj.typeName;
                this.showTypeList[index].typeId = obj.typeId;
                this.showTypeList[index].number = this.showTypeList[index].number + item.assetNum;
                this.showTypeList[index].totalMoney = this.showTypeList[index].totalMoney + item.assetNum *
                  item.price
              }
            })
          })
        });
      },
    }
  }
</script>

<style scoped>
  .box_content {
    width: 98%;
    margin-left: 12px;
    margin-top: 12px;
  }

  .box_seek {
    margin-left: 12px;
    margin-top: 32px;
    height: 280px;
    width: 98%;
    /* border: 2px solid red; */
  }

  .box {
    width: 100%;
    height: 664px;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
  }

  .box_seek_left {
    border-right: 5px solid #f2f2f2;
    width: 70%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    background-color: white;
  }

  /* 柱状图 */
  #chart-container-left {
    position: relative;
    height: 100%;
  }

  .box_seek_right {
    border-left: 5px solid #f2f2f2;
    width: 30%;
    height: 100%;
    background-color: white;
    float: right;
    box-sizing: border-box;
  }

  /* 饼图 */
  #chart-container-right {
    position: relative;
    height: 100%;
  }

  * {
    padding: 0;
    margin: 0;
  }

  span {

    margin-left: 10px;
    font-size: 12px;
  }
</style>
